<template>
<!--新建缺陷弹窗-->
  <div>
      <el-dialog title="新建缺陷" :visible.sync="dialogFisible" :before-close="cancelClick" >
        <el-form>
          <el-form-item label="缺陷名称" :label-width="formLabelWidth" ref="getbName">
            <el-input v-model="bName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="缺陷类型" :label-width="formLabelWidth">
            <el-select v-model="bType" placeholder="请选择缺陷类型" ref="getbType">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="C" value="C"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级" :label-width="formLabelWidth">
            <el-select v-model="priority" placeholder="请选择优先级" ref="getpriority">
              <el-option label="1" value="A"></el-option>
              <el-option label="2" value="B"></el-option>
              <el-option label="3" value="C"></el-option>
              <el-option label="4" value="D"></el-option>
              <el-option label="5" value="E"></el-option>
              <el-option label="6" value="F"></el-option>
              <el-option label="7" value="G"></el-option>
              <el-option label="8" value="H"></el-option>
              <el-option label="9" value="I"></el-option>
              <el-option label="10" value="J"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缺陷状态" :label-width="formLabelWidth">
            <el-select v-model="bState" placeholder="请选择缺陷状态" ref="getbState">
              <el-option label="已解决" value="A"></el-option>
              <el-option label="未解决" value="B"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缺陷提交人" :label-width="formLabelWidth">
            <el-select v-model="bSubmitP" placeholder="请选择提交人" ref="getbSubmitP">
              <el-option label="成员1" value="A"></el-option>
              <el-option label="成员2" value="B"></el-option>
              <el-option label="成员3" value="C"></el-option>
              <el-option label="成员4" value="D"></el-option>
              <el-option label="成员5" value="D"></el-option>
              <el-option label="成员6" value="E"></el-option>
              <el-option label="成员7" value="F"></el-option>
              <el-option label="成员8" value="H"></el-option>
              <el-option label="成员9" value="I"></el-option>
              <el-option label="成员10" value="J"></el-option>
              <el-option label="成员11" value="K"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模块名称" :label-width="formLabelWidth" ref="getmName">
            <el-input v-model="mName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="更新时间" :label-width="formLabelWidth">
            <el-date-picker v-model="updateTime" type="datetime" placeholder="选择日期时间" ref="getupdateTime"></el-date-picker>
          </el-form-item>
          <el-form-item label="缺陷描述" :label-width="formLabelWidth" ref="getbDescribe">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="bDescribe"></el-input>
          </el-form-item>
          <el-form-item label="缺陷解决人" :label-width="formLabelWidth">
            <el-select v-model="bSolveP" placeholder="请选择解决人" ref="getbSolveP">
              <el-option label="成员1" value="A"></el-option>
              <el-option label="成员2" value="B"></el-option>
              <el-option label="成员3" value="C"></el-option>
              <el-option label="成员4" value="D"></el-option>
              <el-option label="成员5" value="D"></el-option>
              <el-option label="成员6" value="E"></el-option>
              <el-option label="成员7" value="F"></el-option>
              <el-option label="成员8" value="H"></el-option>
              <el-option label="成员9" value="I"></el-option>
              <el-option label="成员10" value="J"></el-option>
              <el-option label="成员11" value="K"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="解决时间" :label-width="formLabelWidth">
            <el-date-picker v-model="solveTime" type="datetime" placeholder="选择日期时间" ref="getsolveTime"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- <msg-show caption="提示" :msg="msgText" :show="showMessage" @close="showMessage=false"></msg-show> -->
 
</template>

<script>
// import msgShowVue from './msgShow.vue'
export default {
  name: 'BugBox',
  props:{
    caption:{},
    value:{},
    // show:{},
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
  },
  inject: ["fatherMethod"],
  watch:{
    show(val){
      if (val == true) {
        this.$nextTick(() => {
          this.$refs.getbName.bName();
          this.$refs.getbType.bType();
          this.$refs.getpriority.priority();
          this.$refs.getbState.bState();
          this.$refs.getbSubmitP.bSubmitP();
          this.$refs.getmName.mName();
          this.$refs.getupdateTime.updateTime();
          this.$refs.getbDescribe.bDescribe();
          this.$refs.getbSolveP.bSolveP();
          this.$refs.getsolveTime.solveTime();
        })
      }
    },
    value(val){
      this.bName = val;
      this.bType = val;
      this.priority = val;
      this.bState = val;
      this.bSubmitP = val;
      this.mName = val;
      this.updateTime = val;
      this.bDescribe = val;
      this.bSolveP = val;
      this.solveTime = val;
    },
    dialogFormVisible(newVal) {
      this.dialogFisible = newVal;
    },
    visible(newVal) {
      this.$emit('update:dialogFormVisible', newVal);
    },
  },
  data(){
    return{
      bName: '',
      bType: '',
      priority: '',
      bState: '',
      bSubmitP:'',
      mName:'',
      updateTime: '',
      bDescribe: '',
      bSolveP:'',
      solveTime:'',
      // msgText:'',
      // showMessage: false,
      formLabelWidth: '150px',
      dialogFisible: this.dialogFormVisible,
      // dialogFormVisible: false,
    }
  },
  methods:{
    confirmClick() {
      if (this.bName == ""&&this.bType ==""&&this.priority == ""&&this.bState ==""&&this.bSubmitP==""&&this.mName==""&&this.updateTime==""&&this.bDescribe==""&&this.bSolveP==""&&this.solveTime=="") {
        // this.msgText = "内容未填写";
        // this.showMessage = true;
      } else {
        this.$emit('confirm', this.bName);
        this.$emit('confirm', this.bType);
        this.$emit('confirm', this.priority);
        this.$emit('confirm', this.bState);
        this.$emit('confirm', this.bSubmitP);
        this.$emit('confirm', this.mName);
        this.$emit('confirm', this.updateTime);
        this.$emit('confirm', this.bDescribe);
        this.$emit('confirm', this.bSolveP);
        this.$emit('confirm', this.solveTime);
      }
    },
    cancelClick() {           
      this.fatherMethod();
    },
  }
}
</script>

<style>
.el-input{
  width: 300px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 300px;
}
.el-textarea {
    display: inline-block;
    width: 300px;
}
.el-dialog{
  width: 520px;
  height: 650px;
}
.el-form-item{
  margin-bottom: 10px;
}
.el-dialog__body {
    padding: 5px 0px;
}
</style>
